i<template>
  <div class="results_index">
    <div class="content inner">
      <div class="reporting_wrap" :class="{ padding_t: !isGiveUpStudy }">
        <div class="reporting-btn-top" v-if="isGiveUpStudy">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="updateAudit('F')"
            v-if="auditStep.giveUpIsShow == '1'"
            >放弃就读</el-button
          >
          <el-button
            size="mini"
            type="primary"
            plain
            v-if="auditStep.printIsShow == '1'"
            @click="printing"
            >打印报名表</el-button
          >
        </div>
        <div class="reporting-main module">
          <div class="hd" v-if="isGiveUpStudy">
            <my-progress
              :data="auditStep"
              @_click="updateAudit('0')"
            ></my-progress>
          </div>
          <div class="bd">
            <div class="notice" v-if="isShowStudTips">
              <el-alert type="error" class="stud-tips">
                <template slot="title">
                  <div>{{ studTips.studTips }}</div>
                </template>
              </el-alert>
            </div>
            <!-- 报名信息 -->
            <div class="result-list">
              <div class="result-list-hd">
                <h3 class="title">
                  报名信息
                  <span style="margin-left: 15px"
                    >报名号【{{ studentInfo.regId }}】</span
                  >
                </h3>
                <el-button
                  v-if="isShowEditBtn"
                  class="btn-link"
                  size="mini"
                  type="primary"
                  plain
                  @click="gotoEdit('selectgrade')"
                  >再次修改</el-button
                >
              </div>
              <div class="result-list-bd">
                <table class="reporting-table reporting-table-border">
                  <tr>
                    <th>选择年级</th>
                    <td>{{ studentInfo.gradeName }}</td>
                    <th>报名时间</th>
                    <td>
                      {{
                        studentInfo.regDate | formatTimes("YYYY-MM-DD HH:mm:ss")
                      }}
                    </td>
                    <th>是否捆绑派位</th>
                    <td>{{ studentInfo.isBindName }}</td>
                  </tr>
                  <tr>
                    <th>被捆绑学生身份证号</th>
                    <td
                      :colspan="studentInfo.gradeName == '一年级' ? '5' : '0'"
                    >
                      {{
                        studentInfo.isBindName == "否"
                          ? "----"
                          : studentInfo.bindIdno
                      }}
                    </td>
                    <th v-if="studentInfo.gradeName != '一年级'">原就读学校</th>
                    <td v-if="studentInfo.gradeName != '一年级'">
                      {{ studentInfo.lastSchool }}
                    </td>
                    <th v-if="studentInfo.gradeName != '一年级'">学籍号</th>
                    <td v-if="studentInfo.gradeName != '一年级'">
                      {{ studentInfo.studentNo }}
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <!-- 基本信息 -->
            <div class="result-list">
              <div class="result-list-hd">
                <h3 class="title">基本信息</h3>
                <el-button
                  v-if="isShowEditBtn"
                  class="btn-link"
                  size="mini"
                  type="primary"
                  plain
                  @click="gotoEdit('basicinfo')"
                  >再次修改</el-button
                >
              </div>
              <div class="result-list-bd">
                <table class="reporting-table reporting-table-border">
                  <tr>
                    <th>入学学生姓名</th>
                    <td>{{ studentInfo.name }}</td>
                    <th>
                      {{ stuList.regType == "reg10" ? "证件号" : "身份证号" }}
                    </th>
                    <td>{{ studentInfo.idno }}</td>
                    <th>出生日期</th>
                    <td>
                      {{ studentInfo.birth | formatTimes("YYYY-MM-DD") }}
                    </td>
                  </tr>
                  <tr>
                    <th>性别</th>
                    <td>{{ studentInfo.gender }}</td>
                    <th>民族</th>
                    <td>{{ studentInfo.nation }}</td>
                    <th>户籍类型</th>
                    <td>{{ studentInfo.ogType }}</td>
                  </tr>
                  <tr>
                    <th>健康状况</th>
                    <td>{{ studentInfo.healthType }}</td>
                    <th>登录密码</th>
                    <td style="padding: 0 5px">
                      <el-input
                        v-model="studentInfo.pwd"
                        show-password
                        class="input-nobod"
                        style="width: 100%"
                      ></el-input>
                    </td>

                    <th>手机号</th>
                    <td>{{ studentInfo.phone }}</td>
                  </tr>
                </table>

                <div class="space"></div>
                <table class="reporting-table reporting-table-border">
                  <tr>
                    <th>是否有户口</th>
                    <td>{{ studentInfo.ogStateName }}</td>
                    <th>入学类型</th>
                    <td colspan="3">{{ studentInfo.regTypeName }}</td>
                  </tr>
                  <tr>
                    <th>户籍地址</th>
                    <!-- <td colspan="5" v-if="stuList.regType == 'reg2'">
                      {{ studentInfo.origPlace }}
                    </td> -->
                    <td colspan="5" v-if="stuList.regType == 'reg10'">
                      {{ studentInfo.foreignAddress }}
                    </td>
                    <td colspan="5" v-else-if="stuList.regType == 'reg2'">
                      {{ studentInfo.origPlace }}
                    </td>
                    <td colspan="5" v-else-if="stuList.regType == 'reg9'">
                      {{ studentInfo.origPlace }}
                    </td>
                    <td colspan="5" v-else>
                      {{ studentInfo.regionPlace }}
                    </td>
                  </tr>
                  <tr v-if="stuList.regType == 'reg1'">
                    <th>当前居住地址</th>
                    <td colspan="5">{{ studentInfo.origPlace }}</td>
                  </tr>
                  <tr v-else>
                    <th>当前居住地址</th>
                    <td colspan="5">{{ studentInfo.regionPlace }}</td>
                  </tr>
                  <tr>
                    <th>实际居住产权类型</th>
                    <td>{{ studentInfo.houseType }}</td>
                    <th v-if="studentInfo.oilType">石油系统子女</th>
                    <td v-if="studentInfo.oilType">
                      {{ studentInfo.oilType }}
                    </td>
                    <th v-if="studentInfo.oilType">石油学校选择</th>
                    <td v-if="studentInfo.oilType">
                      {{ studentInfo.oilSchoolName }}
                    </td>
                    <td colspan="5" v-else></td>
                  </tr>
                  <tr v-if="stuList.regType == 'reg9'">
                    <th>意向学校1</th>
                    <td>{{ studentInfo.wishSchoolName1 }}</td>
                    <th>意向学校2</th>
                    <td>{{ studentInfo.wishSchoolName2 }}</td>
                    <th>意向学校3</th>
                    <td>{{ studentInfo.wishSchoolName3 }}</td>
                  </tr>
                  <tr v-if="stuList.regType == 'reg9'">
                    <th>监护人工作单位</th>
                    <td>{{ studentInfo.parWork }}</td>
                    <th>工作单位电话</th>
                    <td colspan="3">{{ studentInfo.parWorkTel }}</td>
                  </tr>
                </table>

                <div class="space"></div>
                <table class="reporting-table reporting-table-border">
                  <tr>
                    <th>监护人1姓名</th>
                    <td>
                      {{ studentInfo.parName }}
                    </td>
                    <th>
                      {{
                        stuList.regType == "reg10"
                          ? "监护人1证件号"
                          : "监护人1身份证号"
                      }}
                    </th>
                    <td>{{ studentInfo.parIdno }}</td>
                    <th>监护人1手机号</th>
                    <td>{{ studentInfo.parPhone }}</td>
                  </tr>
                  <tr>
                    <th>与学生关系</th>
                    <td colspan="5">{{ studentInfo.parRlat }}</td>
                  </tr>
                  <tr>
                    <th>监护人2姓名</th>
                    <td v-if="studentInfo.parName2">
                      {{ studentInfo.parName2 }}
                    </td>
                    <td v-else>----</td>
                    <th>
                      {{
                        stuList.regType == "reg10"
                          ? "监护人2证件号"
                          : "监护人2身份证号"
                      }}
                    </th>
                    <td v-if="studentInfo.parIdno2">
                      {{ studentInfo.parIdno2 }}
                    </td>
                    <td v-else>----</td>
                    <th>监护人2手机号</th>
                    <td v-if="studentInfo.parPhone2">
                      {{ studentInfo.parPhone2 }}
                    </td>
                    <td v-else>----</td>
                  </tr>
                  <tr>
                    <th>与学生关系</th>
                    <td v-if="studentInfo.parRlat2" colspan="5">
                      {{ studentInfo.parRlat2 }}
                    </td>
                    <td v-else colspan="5">----</td>
                  </tr>
                </table>
              </div>
            </div>
            <!-- 佐证资料 -->
            <div class="result-list pb30">
              <div class="result-list-hd">
                <h3 class="title">
                  佐证资料 <span style="color: #666"> 点击查看大图 </span>
                </h3>
                <el-button
                  v-if="isShowEditBtn"
                  class="btn-link"
                  size="mini"
                  type="primary"
                  plain
                  @click="gotoEdit('signup')"
                  >再次修改</el-button
                >
              </div>
              <div
                class="result-list-bd"
                style="
                  padding-left: 10px;
                  border: 1px #ebebeb solid;
                  border-top: none;
                "
              >
                <div class="photoList" :class="{ photoListH: isSlide }">
                  <el-image
                    class="fileList"
                    v-for="(item, index) in fileList"
                    :key="index"
                    style="width: 265px; height: 202px"
                    :src="`${defaultHost}` + item.imgUrl"
                    lazy
                    :preview-src-list="srcList"
                    fit="cover"
                  >
                  </el-image>
                </div>
                <div class="slide" @click="slide" v-if="fileList.length > 4">
                  <span>查看更多资料 </span>
                  <i
                    class="el-icon-arrow-down"
                    v-if="!isSlide && fileList.length > 4"
                  ></i>
                  <i class="el-icon-arrow-up" v-else></i>
                </div>
              </div>
            </div>
            <!-- 放弃就读水印 -->
            <div class="giveup" v-if="!isGiveUpStudy">
              <img :src="require('../assets/images/giveup.png')" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 打印报名表 -->
    <div class="print" style="display: none">
      <!--startprint1-->
      <div class="printing">
        <div class="inner">
          <h3 class="title">新疆中小学网上报名登记表</h3>
          <p class="info">报名号：{{ printInfo.regId }}</p>
          <table class="table">
            <tr>
              <td>姓名</td>
              <td colspan="2">{{ printInfo.name }}</td>
              <td>民族</td>
              <td colspan="2">{{ printInfo.nation }}</td>
            </tr>
            <tr>
              <td>性别</td>
              <td colspan="2">{{ printInfo.gender }}</td>
              <td>出生日期</td>
              <td colspan="2">
                {{ formatDateTime("YY-MM-dd", printInfo.birth) }}
              </td>
            </tr>
            <tr>
              <td>身份证号</td>
              <td colspan="2">{{ printInfo.idno }}</td>
              <td>学籍号</td>
              <td colspan="2">{{ printInfo.schoolNo }}</td>
            </tr>
            <tr>
              <td>户籍地址</td>
              <td colspan="5">{{ printInfo.regionPlace }}</td>
            </tr>
            <tr>
              <td>入学类型</td>
              <td colspan="2">{{ printInfo.regTypeName }}</td>
              <td>报名日期</td>
              <td colspan="2">
                {{ formatDateTime("YY-MM-dd", printInfo.regDate) }}
              </td>
            </tr>
            <tr>
              <td>原就读学校</td>
              <td colspan="5">{{ printInfo.lastSchool }}</td>
            </tr>
            <tr>
              <td>拟就读学校</td>
              <td colspan="2">{{ printInfo.schoolName }}</td>
              <td>拟就读年级</td>
              <td colspan="2">{{ printInfo.gradeName }}</td>
            </tr>
            <tr>
              <td>监护人1姓名</td>
              <td colspan="2">{{ printInfo.parName }}</td>
              <td>监护人1身份证号码</td>
              <td colspan="2">{{ printInfo.parIdno }}</td>
            </tr>
            <tr>
              <td>监护人1手机号码</td>
              <td colspan="2">{{ printInfo.parPhone }}</td>
              <td>监护人1与学生关系</td>
              <td>{{ printInfo.parRlat }}</td>
            </tr>
            <tr>
              <td v-if="studentInfo.parName2">监护人2姓名</td>
              <td
                v-if="studentInfo.parName2"
                :colspan="studentInfo.parIdno2 ? '2' : '4'"
              >
                {{ studentInfo.parName2 }}
              </td>
              <td v-if="studentInfo.parIdno2">监护人2身份证号码</td>
              <td
                v-if="studentInfo.parIdno2"
                :colspan="studentInfo.parName2 ? '2' : '4'"
              >
                {{ studentInfo.parIdno2 }}
              </td>
            </tr>
            <tr>
              <td v-if="studentInfo.parPhone2">监护人2手机</td>
              <td
                v-if="studentInfo.parPhone2"
                :colspan="studentInfo.parRlat2 ? '2' : '4'"
              >
                {{ studentInfo.parPhone2 }}
              </td>
              <td v-if="studentInfo.parRlat2">监护人2与生源关系</td>
              <td
                v-if="studentInfo.parRlat2"
                :colspan="studentInfo.parPhone2 ? '2' : '4'"
              >
                {{ studentInfo.parRlat2 }}
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!--endprint1-->
    </div>
  </div>
</template>
<script>
import MyProgress from "../components/Progress";
import { formatDate } from "../utils/util";
import {
  getVerify,
  getStudPrint,
  getStudResult,
  updateRegInfo,
} from "../utils/api";
import fetches from "../utils/request";
import localDb from "../utils/localDb";
const { defaultHost } = fetches;
export default {
  name: "results",
  components: {
    MyProgress,
  },
  data() {
    return {
      fileList: [], //图片地址
      srcList: [], //预览图片地址
      studentInfo: {}, // 学生信息
      isSlide: false, //是否可以查看更多图片
      defaultHost: defaultHost,
      printInfo: {}, //打印信息
      isGiveUpStudy: true, //是否放弃就读
      auditStep: {
        step: 1, // 到达进度
        printIsShow: "", //打印按钮是否展示
        giveUpIsShow: "", //打印按钮是否展示
        auditStatus: "", //预审状态，0表示预审待审或者审核中，Y表示审核通过，N表示审核不通过,F表示放弃就读
        auditStatusName: "", //预审状态名称
        auditReason: "", //预审不通过原因
        schoolName: "", //预录取学校
        schoolStatus: "", //现场审核状态，0代表待审、Y代表审核通过、N代表审核不通过
        schoolStatusName: "", //现场审核状态名称
        schoolReason: "", //现场审核不通过原因
      },
      studTips: {}, //提示信息
      isShowStudTips: false, //是否显示提示
      isShowEditBtn: true, //是否显示修改按钮
    };
  },
  computed: {
    stuList() {
      return this.$store.state.stuList;
    },
    verify() {
      return this.$store.state.verify;
    },
  },
  methods: {
    //点击打印按钮
    printing() {
      //this.$router.push({path: "/printing"});
      let print = document.getElementsByClassName("print")[0]; //获取目标区域的HTML结构
      document.body.innerHTML = print.innerHTML; //替换网页的html内容
      window.print(); //打印
      window.location.reload(); //刷新页面
    },
    //获取打印信息
    async getPrintInfo() {
      try {
        const data = await getStudPrint();
        if (data.res == 0) {
          this.printInfo = data.data;
        }
      } catch (error) {}
    },
    //查看更多资料
    slide() {
      this.isSlide = !this.isSlide;
    },
    //修改学生状态
    async updateAudit(status) {
      if (status == "F") {
        this.$confirm(
          "放弃学位后本周期不能重报，也不会重新派位，你确定要放弃库尔勒市的学位吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(async () => {
          try {
            const data = await updateRegInfo(status);
            if (data.res == 0) {
              this.isGiveUpStudy = false;
              this.isShowStudTips = false;
              this.isShowEditBtn = false;
            } else {
              this.$message.error(data.msg);
            }
          } catch (error) {}
        });
      } else {
        if (this.verify.res == -1) {
          this.$message.error(this.verify.msg);
          return false;
        }
        try {
          const data = await updateRegInfo(status);
          if (data.res == 0) {
            location.reload();
            // this.$router.push({
            //   path: "basicinfo",
            //   query: { isEditInfos: "basicinfo" },
            // });
          } else {
            this.$message.error(data.msg);
          }
        } catch (error) {}
      }
    },
    //获取结果展示页信息
    async getResult() {
      try {
        const data = await getStudResult();
        if (data.res == 0) {
          // console.log(data);
          this.studentInfo = data.data.personAndRegInfo;
          this.studTips = data.data.studTips;
          this.auditStep = data.data.auditStep;

          if (data.data.personAndRegInfo.healthType) {
            if (data.data.personAndRegInfo.healthType != "良好") {
              this.studentInfo.healthType = this.studentInfo.disableType;
            }
          }
          if (data.data.personAndRegInfo.houseType) {
            if (data.data.personAndRegInfo.houseType == "1") {
              this.studentInfo.houseType = "父母或本人产权";
            } else if (data.data.personAndRegInfo.houseType == "2") {
              this.studentInfo.houseType = "（外）祖父母产权";
            } else {
              this.studentInfo.houseType = "租住房";
            }
          }
          this.fileList = data.data.regImages;
          //设置图片预览地址
          this.fileList.forEach((val) => {
            this.srcList.push(this.defaultHost + val.imgUrl);
          });
          //判断提示信息是否需要弹出显示
          if (this.studTips.studTipsType == 2 && this.studTips.studTips) {
            this.$confirm(this.studTips.studTips, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {})
              .catch(() => {});
          } else if (
            this.studTips.studTipsType == 1 &&
            this.studTips.studTips
          ) {
            this.isShowStudTips = true;
          }

          if (this.auditStep.auditStatus == "F") {
            this.isGiveUpStudy = false;
            this.isShowStudTips = false;
          }
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    formatDateTime(fmt, mydate) {
      return formatDate(fmt, mydate);
    },
    // 判断学生是否可修改信息、注销
    async getVerify() {
      try {
        const data = await getVerify();
        localDb.set("verify", data);
        this.$store.commit("SETSTVERIFYT", data);
        if (this.verify.res == -1) {
          this.isShowEditBtn = false;
        }
      } catch (error) {}
    },
    //修改
    gotoEdit(type) {
      if (type == "selectgrade") {
        this.$router.push({
          path: "selectgrade",
          query: { isEditInfos: "selectgrade" },
        });
      } else if (type == "basicinfo") {
        this.$router.push({
          path: "basicinfo",
          query: { isEditInfos: "basicinfo" },
        });
      } else if (type == "signup") {
        this.$router.push({
          path: "signup",
          query: { isEditInfos: "signup" },
        });
      }
    },
  },
  created() {
    this.getVerify();
  },
  mounted() {
    this.getResult();
    this.getPrintInfo();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.results_index {
  height: 100%;
  // background-color: #edf4fa;
}
.reporting_wrap {
  //   padding: 30px 0;
  padding-bottom: 30px;
}
.padding_t {
  padding-top: 30px;
}
.reporting-btn-top {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-button {
    font-size: 16px;
  }
}
.reporting-main {
  .hd {
    margin-bottom: 0;
  }
  .bd {
    position: relative;
    padding: 0 20px;
    overflow: hidden;
    .el-alert {
      padding: 8px 10px;
      height: 40px;
      background-color: #fff5f5;
      border: solid 1px #ffd6d6;
      /deep/ .el-alert__content {
        padding: 0;
        div {
          font-size: 14px;
          color: #ff0000;
        }
        .el-alert__closebtn {
          color: #999;
          font-size: 16px;
        }
      }
    }
    .giveup {
      width: 198px;
      height: 208px;
      position: absolute;
      top: 35px;
      right: 43px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.result-list {
  margin: 20px 0;
  //   border: 1px solid #ebebeb;
  .result-list-hd {
    height: 40px;
    padding-left: 10px;
    background: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ebebeb;
    .title {
      margin-right: 10px;
      font-size: 16px;
      color: #222;
      span {
        font-size: 14px;
        font-weight: normal;
      }
    }
    .btn-link {
      height: 24px;
      font-size: 12px;
      line-height: 12px;
      margin-right: 10px;
    }
  }
  .result-list-bd {
    border-bottom: $borB;
    // text-align: center;
    th {
      width: 155px;
      height: 45px;
    }
    td {
      width: 230px;
      height: 45px;
    }
    .space {
      width: 100%;
      height: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ebebeb;
    }
  }
  .photoList {
    height: 242px;
    overflow: hidden;
    padding: 10px 0;
    .fileList {
      margin: 10px;
      border-radius: 4px;
      overflow: hidden;
      vertical-align: middle;
    }
  }
  .photoListH {
    height: auto;
  }
  .slide {
    // margin-top: 10px;
    margin-bottom: 18px;
    font-size: 14px;
    text-align: center;
    color: $ftc6;
    cursor: pointer;
  }
  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}
.reporting-table {
  width: 100%;
  color: #222;
  th {
    font-weight: normal;
  }
  th,
  td {
    padding: 12px 20px;
    border: $borB;
    text-align: left;
    font-size: 14px;
    span {
      float: right;
      color: #222;
      // transform: rotate(-15deg);
      &.clor-theme {
        transform: rotate(0);
        color: $bsC;
      }
    }
  }
  tr:nth-child(1) {
    th,
    td {
      border-top: none;
    }
  }
  tr:nth-last-child(1) {
    th,
    td {
      border-bottom: none;
    }
  }
  tr.active {
    td {
      background: #fef7eb;
    }
  }
}
.table-auto {
  border-left: $borB;
  .table-td,
  .table-th {
    float: left;
    padding: 12px 20px;
    min-height: 44px;
    border-width: 0 1px 1px 0;
    border-color: #ebebeb;
    border-style: solid;
    box-sizing: border-box;
  }
  .table-head {
    .table-td {
      width: 15%;
      color: #000;
      font-weight: bold;
      &:nth-last-child(1) {
        width: 70%;
      }
    }
  }
  .table-tright {
    float: left;
    width: 85%;
  }
  .table-body {
    .table-tr.active {
      background: #fef7eb;
    }
    .table-th {
      position: relative;
      width: 15%;
      height: 100%;
      font-weight: bold;
      .batch-name {
        position: absolute;
        left: 20px;
        top: 50%;
        margin-top: -10px;
        line-height: 20px;
      }
    }
    .table-td {
      width: 17.65%;
      &:nth-last-child(1) {
        width: 82.35%;
      }
      p {
        float: right;
        color: $ftc9;
        transform: rotate(-15deg);
        &.clor-theme {
          transform: rotate(0);
          color: $bsC;
        }
      }
    }
    > .table-tr:nth-last-child(1) {
      .table-th {
        border-bottom: none;
      }
      .table-tright {
        > .table-tr:nth-last-child(1) {
          .table-td {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>
